<template>
	<view class="container" v-cloak>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar backgroundColor="#0077ff" color="white" :fixed='true'>

			<view slot="left" class="img" @click="showUser">
				<image src="../../static/img/ava.png" mode=""></image>
			</view>
			<view>首页</view>
			<view slot="right" @click="createOrder">新建订单</view>
		</uni-nav-bar>
		<!-- <view class="box">
			
		</view>	 -->
		<mescroll-body v-if="t1" ref="mescrollRef" @init="mescrollInit" :down="downOption"  @down="downCallback" @up="upCallback">
			<view class="box">
				<view class="header">
					今日统计
					<view @click="goOrderList">全部订单 <uni-icons type="arrowright" size="30" style=" color: #87888a; 
					 font-size: 28upx;"></uni-icons>
					</view>
				</view>
				<view class="lb">
					<view class="lbItem">
						<view class="line1">{{orderStatToday.appoint?orderStatToday.appoint:0}}</view>
						<view class="line2">待预约</view>
					</view>
					<view class="lbItem">
						<view class="line1">{{orderStatToday.finish?orderStatToday.finish:0}}</view>
						<view class="line2">已指定预约</view>
					</view>
					<view class="lbItem">
						<view class="line1">{{orderStatToday.after?orderStatToday.after:0}}</view>
						<view class="line2">售后申请</view>
					</view>
				</view>
				<view class="header">
					业务处理
				</view>
				<view class="order_tab">
					<view class="order_tab_list" :class="{active:active==index}" v-for="(item,index) in tabs" @click="onClickItem(index)"
					 :key="index">
						{{item}}
						<view class="xian"></view>
					</view>
				</view>
				<view class="list">
					<view class="listItem" v-for="(item,i) in dataList" :key="i" @click="goDetail(item)">
						<view class="time">
							<view class="type" :class="{'active':item.bz==2}">{{item.bz==1?"家政":"医疗"}}</view>
							<view class="shijian" v-if="active!=2">
								付款时间
								<text>{{item.pay_time}}</text>
							</view>
							<view class="shijian" v-if="active==2">
								申请时间
								<text>{{item.after_time}}</text>
							</view>
						</view>
						<view v-for="(item2,i2) in item.serve_list" :key='i2'>
							<view class="content" v-if="active!=2">
								{{item2.serve_name}}
							</view>
							<view class="content" v-if="active==2">
								<!-- {{active==2?item2:item2.serve_name}} -->
								{{item2}}
							</view>
							<view class="lineBox" v-if="active!=2">
								<view class="line">
									<view class="left">
										所选规格:
									</view>
									<view class="right">
										{{item2.specs_name}}
									</view>
								</view>
								<view class="line">
									<view class="left">
										上门时间:
									</view>
									<view class="right">
										{{item2.visit_time}}
									</view>
								</view>
								<view class="line">
									<view class="left">
										服务人员:
									</view>
									<view class="right" style="color: #0077ff;" v-if="active==0">
										未指定
									</view>
									<view class="right" style="color: #0077ff;" v-if="active==1">
										<text v-for="(item3,i3) in item2.serve_person" :key="i3" style="margin-right:10rpx"> {{item3}}</text>
									</view>
								</view>
								
							</view>
							<view class="lineBox" v-if="active==2">
								<view class="line">
									<view class="left ">
										申请内容:
									</view>
									<view class="right chang">
										{{item.content}}
									</view>
								</view>
								<view class="line">
									<view class="left">
										申请原因:
									</view>
									<view class="right">
										{{item.appro_name}}
									</view>
								</view>
								
							</view>
						</view>
						
						
						<view class="caozuo">
								<text @click.stop="closeOrder" v-if="active!=2">退款并关闭</text>
								<view @click.stop="modifyorder(item)" v-if="active!=2">指派修改</view>
								<view v-if="active==2">相关订单</view>
						</view>
						<div class="hr"></div>
					</view>

				</view>


			</view>


		</mescroll-body>

		<uni-popup ref="popup" type="dialog">
			<view class="contain">
				<view class="ti">提示</view>
				<view id="" class="outer">
					<view class="sure">确定退款并关闭交易吗?</view>
					<view class="tip">(关闭后无法恢复)</view>
				</view>
				<view class="shuzi">
					<view class="left">退款金额</view>
					<view class="right">
						￥199.99

					</view>
				</view>
				<view class="shuzi">
					<view class="left">相关订单</view>
					<view class="right">
						1234111111434

					</view>
				</view>
				<view class="shuzi">
					<view class="left">交易流水号</view>
					<view class="right">
						1234111111434
					</view>
				</view>
				<view class="bottom1">
					<view>取消</view>
					<view>确定</view>

				</view>
			</view>

		</uni-popup>


		<uni-drawer mode="left" ref="drawers" :width='260'>
			<view style="padding:20rpx;" class="drawerBox">
				<view class="uni-title">
					<view>{{userInfo&&userInfo.username?userInfo&&userInfo.username:userInfo&&userInfo.account}}</view>
					<view>ID:{{userInfo&&userInfo.mid}}</view>
				</view>
				<view class="ownArea">
					<view>我负责的区域:  <text style="color:#0077FF;font-weight:blod;float:right;" @click="goAll">查看全部</text></view> 
					<view class="area-list">
						<view class="areaItem" v-for="(item,i) in areaListArr2" :key="i">
							{{item[1]}}
						</view>
						<view class="areaItem" v-if="areaListArr&&areaListArr.length>6">
							....
						</view>
	
					</view>
				</view>

				<view class="bottomBtn">
					<view @click="editPass">修改密码</view>
					<view @click="logout">退出登录</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import {mapGetters} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			uniNavBar,
			uniDrawer
		},
		computed: {
			...mapGetters([
			  "userInfo",
			  "isLogin",
			  "token",
              "uid",
			])
    	},
		data() {
			return {
				downOption: {
					auto:false //是否在初始化后,自动执行downCallback; 默认true
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
						page: {
							size: 10 // 每页数据的数量,默认10
						},
						noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
						empty: {
							tip: '暂无相关数据'
						},
						auto:false
				},
				dataList: [],
				tabs: ['待指派预约', '已指定预约', '售后申请'],
				active: 0,
				areaListArr:[],
				areaListArr2:[],
				orderStatToday:{},
				orderList:[],
				t1:true,//修改mescroll一个页面只能有一个实例的bug

			}
		},
		mounted() {
			this.orderStat()
			this.orderDispose()
			this.areaList()
		},
		methods: {
			orderDispose(){//业务处理订单
				this.$store.dispatch("orderDispose",{type:this.active+1}).then(res=>{
					if(res.code==1){
						this.orderList= res.data
						this.loadData(1)
					}
				})

			},
			orderStat(){//获取今日统计
				this.$store.dispatch("orderStat").then(res=>{
					if(res.code==1){
						this.orderStatToday = res.data
					}
				})
			},
			areaList(){//获取区域列表
				this.$store.dispatch("areaList").then(res=>{
					if(res.code==1){
						this.areaListArr = Object.entries(res.data.area_list)
						this.areaListArr2 = Object.entries(res.data.area_list).splice(0,6);
						// console.log(this.areaListArr)
					}
				})
			},
			goAll(){
				uni.navigateTo({
					url:'/pages/index/areaList'
				})
			},
			editPass(){
				this.$refs.drawers.close()
				uni.navigateTo({
					url:"/pages/login/editPass"
				})
			},
			logout(){
				this.$store.dispatch("logout",{uid:this.uid}).then(res=>{
					if(res.code==1){
						this.$refs.drawers.close()
						uni.navigateTo({
							url:"/pages/login/index"
						})
					}
				})
				
			},
			showUser(){
				this.$refs.drawers.open()
			},
			closeOrder() {

				this.$refs.popup.open()

			},
			modifyorder(item){
				 uni.navigateTo({
					url:`/pages/order/modifyorder?oid=${item.oid}`
				})
			},
			onClickItem(e) {
				// console.log(e);
				this.active = e;
				this.orderDispose()
				//this.mescroll.lockUpScroll(false)
				this.t1 = false
				setTimeout(()=>{
					this.t1 = true
				},10)
			},
			goDetail(item){//前往订单详情
			
				uni.navigateTo({
					url:`/pages/order/orderDetail?oid=${item.oid}`
				})
			},
			goOrderList(){//前往订单列表
				uni.navigateTo({
					url:`/pages/order/index`
				})
			},
			createOrder(){
				uni.navigateTo({
					url:`/pages/order/createOrder/create1`
				})
			},
			upCallback(page) {
				//联网加载数据
				
				//console.log(page.num,'上拉加载')
				//this.mescroll.optUp.hasNext = true
				this.loadData(page.num);
				
				// this.mescroll.endSuccess()
				 //this.mescroll.endDownScroll()
			},
			downCallback(page) {
				//联网加载数据
				 //this.mescroll.lockUpScroll(false)
				 //this.mescroll.optUp.hasNext = true
				 //this.mescroll.optUp.isLock  = false
				// console.log(this.mescroll.optUp.hasNext,'下拉刷新')
				// console.log(page.num)
				// this.loadData(1);
				this.orderDispose()
				this.orderStat()
				this.t1 = false
				setTimeout(()=>{
					this.t1 = true
				},10)
			},
			loadData(pageNo) {// pageNo页码, 默认从1开始
				// 模拟接口
				let pageSize = 10; // 页长, 默认每页10条
				let curPageData  = this.orderList.slice((pageNo - 1) * pageSize, pageNo * pageSize);// 模拟返回的当前页数据列表 (数组)
				//console.log(curPageData ,this.orderList,Math.ceil(this.orderList.length / pageSize))
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData .length;
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				let totalPage = Math.ceil(this.orderList.length / pageSize); 
				// 接口返回的是否有下一页 (true/false)
				let hasNext =totalPage==pageNo?false:true; 
				// console.log(hasNext,'是否有下一页')
				if (pageNo == 1) {
					this.dataList = curPageData ;
				} else {
					this.dataList = [...this.dataList,...curPageData ]
				}
				 console.log(curPageLen,this.dataList,totalPage,'数据列表')
				this.mescroll.endByPage(curPageLen,totalPage); //必传参数(当前页的数据个数, 总页数)
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	$白色:#fff;
	$常规黑:#010101;
	$字体灰:#686868;
	$字体灰2:#B6B6B6;
	$价格红:#F20000;

	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		.uni-navbar__header {
			image {
				width: 46upx;
				height: 48upx;
				//margin-top: 40upx;
			}
		}

		.box {
			padding: 28upx;
			box-sizing: border-box;

			.header {
				height: 70upx;
				line-height: 70upx;
				width: calc(100% - 10px);
				font-size: 32upx;
				font-weight: 550;
				position: relative;
				padding-left: 30upx;

				&:before {
					position: absolute;
					content: "";
					left: 0upx;
					top: 22upx;
					display: inline-block;
					width: 8upx;
					height: 28upx;
					background: linear-gradient(#24d0c5, #24D0C5 100%);
				}

				view {
					float: right;
					font-size: 28upx;
					color: #A4A8B7;
					font-weight: normal;
				}
			}

			.lb {
				width: 100%;
				height: 160upx;
				background: white;
				border-radius: 6upx;
				display: flex;
				justify-content: space-around;
				margin-bottom: 30upx;

				.lbItem {
					position: relative;
					width: 33.3%;
					text-align: center;
					height: 100%;

					.line1 {
						margin-top: 30upx;
						font-size: 36upx;
					}

					.line2 {
						margin-top: 14upx;
						color: #A4A8B7;
						font-size: 28upx;
					}

				}

			}

			.order_tab {
				display: flex;
				align-items: center;
				height: 96upx;
				background: #fff;
				width: 100%;
				z-index: 999;
				margin-bottom: 20upx;

				.order_tab_list {
					width: 33.3%;
					font-size: 28upx;
					color: #0077FF;
					text-align: center;
				}

				.active {
					color: #0077FF;
					position: relative;

					.xian {
						border-radius: 50px;
						position: absolute;
						top: 45upx;
						left: 50%;
						right: 0;
						transform: translate(-50%, -50%);
						height: 4upx;
						width: 40upx;
						background: #0077FF;
					}
				}
			}

			.list {
				
				margin-bottom: 20upx;

				.listItem {
					width: calc(100% - 60upx);
					background: white;
					padding: 30upx;
					position: relative;
					margin-bottom: 10upx;

					.time {
						display: flex;
						justify-content: space-between;
						font-size: 28upx;
						margin-bottom: 22upx;

						.type {
							color: #F7B500;
							&.active{
								color: #50B83C;
							}
						}

						.shijian {
							font-size: 28upx;
							color: #A4A8B7;

							text {
								margin-left: 40upx;
							}
						}
					}

					.content {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 22upx;
						font-size: 36upx;

					}

					.lineBox {
						width: 100%;

						.line {
							display: flex;
							margin-bottom: 16upx;
							font-size: 30upx;
							line-height: 44upx;

							.left {
								color: #A4A8B7;
								margin-right: 20upx;
								width: 140upx;
								font-size: 28upx;
							}

							.right {
								font-size: 32upx;
								width: calc(100% - 140upx);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

						}

					}

					.caozuo {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						color: #F04559;
						font-size: 28upx;
						line-height: 60upx;

						view {
							width: 180upx;
							text-align: center;
							line-height: 60upx;
							border-radius: 30upx;
							background: #0077ff;
							color: white;
							margin-left: 36upx;
						}
					}

					.hr {
						position: absolute;
						width: 93%;
						height: 4upx;
						bottom: 0upx;
						right: 0;
						background: #eee;
						margin-top: 50px;
					}
				}
			}
		}

		.contain {
			width: 390upx;
			height: 690upx;
			background: white;
			border-radius: 10upx;
			padding: 30upx 80upx;
			text-align: center;

			.ti {
				width: 100%;
				font-size: 32upx;
				font-weight: 600;
			}

			.outer {
				margin: 0 auto;
				text-align: center;
				font-size: 32upx;
				overflow: hidden;

				.sure {
					margin-top: 32upx;
				}

				.tip {
					color: #F04559;
					font-weight: 550;
				}

			}

			.shuzi {
				margin: 32upx 0;
				display: flex;
				flex-direction: column;
				text-align: left;

				.left {

					color: #A4A8B7;
					font-size: 32upx;


				}

			}

			.bottom1 {
				margin-top: 76upx;
				display: flex;
				justify-content: space-between;

				view {
					width: 180upx;
					height: 60upx;
					line-height: 64upx;
					font-size: 28upx;
					color: #0A7CFF 100%;
					background: white;
					border-radius: 30upx;
					border: 2upx solid #0A7CFF;


				}

				view:nth-of-type(2) {
					color: white;
					background-color: #0077FF;
				}
			}
		}
	}
	.drawerBox{
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		.uni-title{
			font-size: 40rpx;
			color: #262e34;
			padding-top: 60rpx;
			font-weight: bold;
			view{
				&:nth-of-type(2){
					font-size: 28rpx;
					color: #a4a8b7;
					font-weight: 400;
				}
			}
		}
		.ownArea{
			margin-top: 60rpx;
			view{
				&:nth-of-type(1){
					font-size: 28rpx;
					color: #A4A8B7;
				}
				&.area-list{
					.areaItem{
						line-height: 60rpx;
						font-size: 28rpx;;
						color: #010101;
					}
				}
			}
		}
		.bottomBtn{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 100rpx;
			width: 80%;
			margin: 0 auto;
			view{
				width: 100%;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				&:nth-of-type(1){
					border: 1px solid #0077ff;
					color: #0077ff;
					border-radius: 8rpx;
					margin-bottom: 40rpx;
				}
				&:nth-of-type(2){
					border: 1px solid #edeff7;
					color: #61667c;
					border-radius: 8rpx;
					background: #edeff7;
					
				}
			}
		}
	}
</style>
